<template>
  <view class="run-order-detail-wrap" v-if="info" >
    <!--  订单状态  -->
    <view class="status">
      <view class="iconfont icon-dingdanzhuangtai status__label" ></view>
      <view class="status__desc" >
        <text>{{ status | statusValueFilter }}</text>
      </view>
    </view>

    <view class="list" >
      <view class="ceil" >
        <view class="label" >取件商店：</view>
        <view class="value" >{{ info.shop_name }}</view>
      </view>
      <view class="ceil" >
        <view class="label" >送件地：</view>
        <view class="value" >{{ info.region+info.address }}</view>
      </view>
      <view class="ceil" >
        <view class="label" >联系人：</view>
        <view class="value" >{{ info.buyer_name  }}</view>
      </view>
      <view class="ceil" >
        <view class="label" >联系电话：</view>
        <view class="value" >{{ info.buyer_phone }}</view>
      </view>
      <view class="ceil" >
        <view class="label" >商品名称：</view>
        <view class="value" >{{ info.goods_name }}</view>
      </view>
      <view class="ceil" >
        <view class="label" >商品数量：</view>
        <view class="value" >{{ info.goods_count }}</view>
      </view>
      <!-- <view class="ceil" >
        <view class="label" >实付金额：</view>
        <view class="value" style="color: red;" >¥{{ info.price /100 }}</view>
      </view> -->
    </view>

     <!-- 时间 -->
     <view class="list" style="margin-top: 0;" >
       <view class="ceil" >
         <view class="label" >订单编号：</view>
         <view class="value" >{{ info.order_sn }}</view>
       </view>
       <view class="ceil" >
         <view class="label" >创建时间：</view>
         <view class="value"  >{{ info.created_at }}</view>
       </view>
       <view class="ceil" v-if="info.start_time" >
         <view class="label" >接单时间：</view>
         <view class="value"  >{{ info.start_time }}</view>
       </view>
       <view class="ceil" v-if="info.end_time" >
         <view class="label" >完成时间：</view>
         <view class="value"  >{{ info.end_time }}</view>
       </view>
     </view>

    <!-- 进行中 -->
     <view class="btn-box" v-if="status < 2" >
       <button
         class="pp-button cancel-btn"
         hover-class="pp-button--active"
         @tap="handleCancel"
       >
         取消
       </button>
       <button
       class="pp-button cancel-btn"
      hover-class="pp-button--active"
      @tap="handleToPay"
    >
      继续付款
    </button>
     </view>

  </view>
</template>

<script>
  import { momentDate } from '@/tool';
  import { CANCEL_RUN } from '@/api/run';
  import {ORDER_CANCEL, PAY_SIGN ,ORDER_DETAIL} from '@/api/order';
  export default {
    data() {
      return {
        status: '',
        info: null,
        id:''
      }
    },
    onLoad({item}) {

      this.info = JSON.parse(decodeURIComponent(item));
      this.status = this.info.status;
      this.id=this.info.id;
    },
    filters: {
      statusValueFilter(val) {
        const statusObj = {
          0: '待支付',
          1: '已发起',
          2: '进行中',
          3: '已完成',
          4: '已取消'
        }

        return statusObj[val]
      }
    },
    methods: {
      cancelOrder() {
        this.$http.put(ORDER_CANCEL, {
          id: this.id,
          status: 4
        })
        .then(() => {
          uni.showToast({
            title: '取消成功',
            icon: 'success',
          });
          uni.hideToast();
          setTimeout(() => {
            uni.hideLoading();
            uni.navigateBack({
              delta: 1,
            })
          }, 1000)
        })
        .catch(() => {
          uni.hideToast();
        })
      },
      getOrderDetail(id) {
        this.$http.get(`${ORDER_DETAIL}/${id}`)
          .then(res => {
            this.orderInfo = res.data;
            this.orderInfo.created_at = momentDate(res.data.created_at, 'YYYY-MM-DD HH:mm');
           // this.orderInfo.item_thumb = this.orderInfo.item_thumb.split(',')[0]
            this.orderInfo.distribution_time = momentDate(res.data.distribution_time, 'MM月DD日')
          })
      },
      getPaymentSign(sn) {
        // PAY_SIGN
        return this.$http.put(PAY_SIGN, {
          id: this.id
        })
      },
      async handleToPay() {
        uni.showToast({
          title: '请求中...',
          mask: true,
          icon: 'loading',
          duration: 300000,
        });
        try{
          const entry = await this.getPaymentSign();
          const {
            data
          } = entry;
          uni.requestPayment({
            timeStamp: data.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
            nonceStr: data.nonceStr, // 支付签名随机串，不长于 32 位
            package: data.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
            signType: data.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
            paySign: data.paySign,
            success: res => {
              uni.hideToast();
              if (res.errMsg === 'requestPayment:ok') {
                uni.showToast({
                  title: '支付成功',
                  icon: 'success',
                });
                this.getOrderDetail(this.id);
              }
            },
            fail: () => {
              uni.hideToast();
            },
          });

        }catch(e){
          uni.hideToast();
        }
      },
      handleCancel() {
        uni.showModal({
          title: '温馨提示',
          content: `确定取消?`,
          success: res => {
            if (res.confirm) {

               this.cancelOrder()
            } else if (res.cancel) {
              console.log('用户点击取消');
            }
          },
        });
      }
    }


  }


</script>

<style lang="less" >
  .run-order-detail-wrap{
    padding-bottom: 150rpx;
    padding-bottom: calc(150rpx + constant(safe-area-inset-bottom));
    padding-bottom: calc(150rpx + env(safe-area-inset-bottom));
    .status {
      display: flex;
      width: 100%;
      height: 196rpx;
      padding: 50rpx 36rpx;
      background: #fedd00;
      &__label{
        font-size: 44rpx;
        margin-top: -2rpx;
      }
      &__desc{
        display: flex;
        font-size: 34rpx;
        margin-left: 10rpx;
      }
    }
    .list{
      width: 710rpx;
      border-radius: 20rpx;
      margin: auto;
      margin-top: -48rpx;
      margin-bottom: 24rpx;
      background-color: #ffffff !important;
      background-size: 100% !important;
      .ceil{
        position: relative;
        display: flex;
        align-items: center;
        padding: 24rpx;
        &::before{
          content: '';
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          margin: auto;
          width: 662rpx;
          height: 1px;
          background-color: #EEEEEE;
        }
        &:last-child{
          &::before{
            display: none;
          }
        }
        .label{
          flex-shrink: 0;
          width: 180rpx;
          font-size: 28rpx;
          color: #666666;
        }
        .value{
          flex: 1;
          font-size: 28rpx;
          color: #333333;
        }
      }
    }
    .upload-box{
      width: 710rpx;
      padding-bottom: 24rpx;
      border-radius: 20rpx;
      margin: auto;
      margin-bottom: 24rpx;
      background-color: #ffffff !important;
      background-size: 100% !important;

      .title{
        display: flex;
        align-items: center;
        padding: 24rpx;
        .title-main{
          font-size: 28rpx;
          font-weight: 500;
        }
        .title-desc{
          font-size: 24rpx;
          margin-left: 16rpx;
          color: #999999;
        }
      }
      .box-solid{
        width: 200rpx;
        height: 200rpx;
        margin-left: 24rpx;
        border-radius: 12rpx;
        border: 1px solid #EEEEEE;
        .img{
          width: 220rpx;
          height: 220rpx;
        }
      }
    }
    .join-box{
      width: 710rpx;
      min-height: 200rpx;
      padding-bottom: 24rpx;
      border-radius: 20rpx;
      margin: auto;
      margin-bottom: 24rpx;
      background-color: #ffffff !important;
      background-size: 100% !important;
      .box{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 24rpx;
        border-bottom: 1px solid #EEEEEE;
      }
      .ceil{
        display: flex;
        align-items: center;
        padding: 24rpx;
        .sort{
          margin-right: 30rpx;
          font-size: 32rpx;
          font-weight: 500;
        }
        .name{
          margin-right: 20rpx;
        }
        .mobile{
          color: #0000ff;
        }
      }
    }

    .btn-box {
      position: fixed;
      bottom: 0;
      left: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 136rpx;
      .cancel-btn {
        width: 710rpx;
        height: 92rpx;
        font-size: 32rpx;
        background-color: #fedd00;
      }
    }
  }
</style>
